<!--
 * @Description: 
 * @Author: xuqi
 * @Github: https://github.com/knight-peter
 * @LastEditors: xuqi
 -->
<template>
  <div class="m-page m-page--boss">
    <van-nav-bar
      class="m-page__bar"
      title="董事补货"
      left-arrow
      @click-left="onClickLeft"
    />
    <!-- bannser -->
    <div class="m-page__banner"><img src="~_a/img/become_boss.png" /></div>
    <!-- 内容 start -->
    <van-cell-group>
      <van-cell title="【抖贴-低周波理疗仪】董事补货" />
      <van-cell
        title-class="m-cell-title"
        :title="`￥${price}/套`"
        :label="`市场价￥${market_price}/套`"
      />
    </van-cell-group>
    <van-cell-group class="g-mt--10">
      <van-cell
        @click="showDialog"
        title-class="g-c--gray"
        title="请选择商品规格及数量"
        is-link
      />
    </van-cell-group>
    <article class="m-panel m-panel--detail g-mt--10">
      <header class="m-panel__header">图文详情</header>
      <div class="m-panel__content"><img src="~_a/img/details-img.jpg" /></div>
    </article>
    <!-- 内容 end -->
    <van-goods-action>
      <van-goods-action-mini-btn icon="wap-home" to="/" />
      <van-goods-action-big-btn primary text="立即下单" @click="showDialog" />
    </van-goods-action>
    <!-- 弹窗 start -->
    <van-dialog
      v-model="show"
      confirm-button-text="确认下单"
      show-cancel-button
      :before-close="beforeClose"
    >
      <h2 class="m-dialog-title">我要补货</h2>
      <van-cell-group>
        <van-cell
          @click="showPicker"
          title-class="g-c--gray"
          is-link
          arrow-direction="down"
        >
          <template slot="title">
            <span class="g-c--red g-mr--5">*</span>
            <span>{{ goods_type_text }}</span>
          </template>
        </van-cell>
        <van-field
          v-model="count"
          type="number"
          label="补货数量"
          placeholder="请输入补货数量"
          required
          :error-message="`需支付：${total}元`"
        />
        <van-field
          v-model="receiver_name"
          type="text"
          label="收件人姓名"
          placeholder="请输入收件人姓名"
          required
        />
        <van-field
          v-model="receiver_area"
          label="收货地区"
          placeHolder="选择省 / 市 / 区"
          @click="selectArea"
          readonly
          required
        />
        <van-field
          v-model="receiver_address_more"
          label="详细地址"
          placeHolder="请输入收件人的详细地址"
          required
        />
        <van-field
          v-model="receiver_mobile"
          type="tel"
          label="收件人手机"
          placeholder="请输入收件人手机"
          required
        />
      </van-cell-group>
      <div class="m-dialog-details">
        <p>
          注：下单后，请前往【会员中心】 → 【我的订单】 → 【待付款】
          中进行相关线下付款操作，如有疑问，请直接联系官方客服。
        </p>
      </div>
    </van-dialog>
    <!-- 弹窗 end -->
    <!-- 补货类型 start -->
    <van-popup v-model="show_picker" position="bottom">
      <van-picker
        show-toolbar
        title="补货类型"
        :columns="columns"
        @cancel="onCancel"
        @confirm="onConfirm"
      />
    </van-popup>
    <!-- 补货类型 end -->
    <!-- 选择地区 start -->
    <van-popup v-model="show_area" position="bottom">
      <van-area
        ref="area"
        :area-list="areaList"
        @confirm="confirmArea"
        @cancel="cancelArea"
      />
    </van-popup>
    <!-- 选择地区 end -->
  </div>
</template>

<script>
import {
  NavBar,
  GoodsAction,
  GoodsActionBigBtn,
  GoodsActionMiniBtn,
  Field,
  Cell,
  CellGroup,
  Popup,
  Area,
  Picker
} from "vant";
import areaList from "@/lib/area";
import { goodsModel } from "@/api";
import Tool from "@/lib/tool";
import Util from "@/lib/util";
const tool = new Tool();
const util = new Util();

export default {
  name: "boss_stock",
  data() {
    return {
      show: false,
      count: "",
      receiver_name: "",
      address: "",
      receiver_mobile: "",
      price: 218,
      market_price: 388,
      goodsPrice: null,
      // total: 0,
      show_picker: false,
      goods_type: "",
      goods_type_text: "请选择补货类型",
      columns: ["成品", "配件"],
      receiver_area: "",
      receiver_address_more: "",
      area_name: "",
      show_area: false,
      areaList,
      type: ""
    };
  },
  components: {
    "van-nav-bar": NavBar,
    "van-goods-action": GoodsAction,
    "van-goods-action-big-btn": GoodsActionBigBtn,
    "van-goods-action-mini-btn": GoodsActionMiniBtn,
    "van-field": Field,
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-picker": Picker,
    "van-popup": Popup,
    "van-area": Area
  },
  computed: {
    total() {
      let count_num = this.count || 0;
      let price_num = this.price;
      let total_num = count_num * price_num;
      return total_num;
    }
  },
  created() {
    this.getGoodsPrice();
  },
  mounted() {
    this.$toast.setDefaultOptions({
      duration: 1500
    });
  },
  methods: {
    /* 获取商品规格列表 */
    getGoodsPrice() {
      goodsModel._getGoodsPrice().then(res => {
        this.goodsPrice = res;
        this.price = this.goodsPrice.product_price;
        this.market_price = this.goodsPrice.origin_product_price;
      });
    },
    /* 下单 */
    createSupplementOrder(formData) {
      goodsModel._createSupplementOrder(formData).then(res => {
        util._done({ res, to: "/user_center/my_orders/0" });
      });
    },
    /* 选择地区 */
    selectArea() {
      this.show_area = true;
    },
    /* 地区选择成功 */
    confirmArea(res) {
      this.show_area = false;
      const province = res[0];
      const city = res[1];
      const area = res[2];
      this.receiver_area = province.name + city.name + area.name;
      this.area_name = `${province.name}/${city.name}/${area.name}`;
    },
    /* 地区选择取消 */
    cancelArea() {
      this.show_area = false;
      this.$refs.area.reset();
    },
    /* 返回 */
    onClickLeft() {
      this.$router.go(-1);
    },
    showDialog() {
      this.show = true;
    },
    showPicker() {
      this.show_picker = true;
    },
    beforeClose(action, done) {
      const formData = {
        type: this.type,
        count: this.count,
        receiver_name: this.receiver_name,
        receiver_mobile: this.receiver_mobile,
        receiver_address: this.receiver_address_more,
        area_name: this.area_name
      };
      console.log(formData);

      if (action === "confirm") {
        if (!tool.formDataCheck(formData)) {
          this.$toast({
            type: "fail",
            message: "必填项为空！",
            duration: 1500
          });
          done(false);
          return;
        }
        if (!tool.formatTime(this.receiver_mobile, "phone")) {
          this.$toast.fail({
            message: "必填项为空！",
            duration: 1500
          });
          done(false);
          return;
        }
        // debugger;
        this.createSupplementOrder(formData);
      }
      done();
      this.goods_type = "";
      this.goods_type_text = "请选择补货类型";
      this.type = "";
      this.count = "";
      this.receiver_name = "";
      this.receiver_mobile = "";
      this.receiver_area = "";
      this.receiver_address_more = "";
      this.area_name = "";
    },
    onConfirm(value, index) {
      this.show_picker = false;
      this.goods_type = index;
      if (this.goods_type === 0) {
        this.type = "product";
        this.price = this.goodsPrice.product_price;
      }
      if (this.goods_type === 1) {
        this.type = "parts";
        this.price = this.goodsPrice.parts_price;
      }
      this.goods_type_text = value;
      // this.$toast(`当前值：${value}, 当前索引：${index}`);
    },
    onCancel() {
      this.show_picker = false;
      // this.$toast("取消");
    }
  }
};
</script>

<style scoped></style>
